---
permalink: /test/
modifiers:
  - ''
  - primary
  - link
  - info
  - success
  - warning
  - danger
  - white
  - black
  - light
  - dark
---
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title> Test </title>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
  <link href="{{ site.url }}{{ site.baseurl }}/default/bulmaswatch.min.css" id="stylesheet" rel="stylesheet" type="text/css" />
  <style type="text/css">
  .switcher {
    position: fixed;
    top: 0;
    right: 0;
  }

  .control .control,
  .control .help,
  .control.has-addons,
  .control.is-grouped,
  .control.is-horizontal,
  .control-label,
   :not(.field)>.control {
    background-color: red;
    box-shadow: 3px 3px 3px 3px red;
  }

  .hero .container {
    width: 95%;
  }
  </style>
</head>

<body>
  <section class="hero is-primary">
    <div class="hero-body">
      <div class="container">
        <h1 class="title"> Bulma </h1>
        <h2 class="subtitle"> Theme preview </h2>
      </div>
    </div>
  </section>
  <div class="columns">
    <div class="column is-2">
      <aside class="menu section">
        <p class="menu-label"> Elements </p>
        <ul class="menu-list">
          <li>
            <a href="#typography"> Typography </a>
          </li>
          <li>
            <a href="#box"> Box </a>
          </li>
          <li>
            <a href="#button"> Button </a>
          </li>
          <li>
            <a href="#content"> Content </a>
          </li>
          <li>
            <a href="#delete"> Delete </a>
          </li>
          <li>
            <a href="#form"> Form </a>
          </li>
          <li>
            <a href="#icon"> Icon </a>
          </li>
          <li>
            <a href="#images"> Images </a>
          </li>
          <li>
            <a href="#notifications"> Notifications </a>
          </li>
          <li>
            <a href="#progress"> Progress bars </a>
          </li>
          <li>
            <a href="#table"> Table </a>
          </li>
          <li>
            <a href="#tag"> Tag </a>
          </li>
        </ul>
        <p class="menu-label"> Components </p>
        <ul class="menu-list">
          <li>
            <a href="#breadcrumb"> Breadcrumb </a>
          </li>
          <li>
            <a href="#dropdown"> Dropdown </a>
          </li>
          <li>
            <a href="#card"> Card </a>
          </li>
          <li>
            <a href="#hero"> Hero </a>
          </li>
          <li>
            <a href="#level"> Level </a>
          </li>
          <li>
            <a href="#media"> Media object </a>
          </li>
          <li>
            <a href="#menu"> Menu </a>
          </li>
          <li>
            <a href="#message"> Message </a>
          </li>
          <li>
            <a href="#modal"> Modal </a>
          </li>
          <li>
            <a href="#navbar"> Navbar </a>
          </li>
          <li>
            <a href="#pagination"> Pagination </a>
          </li>
          <li>
            <a href="#panel"> Panel </a>
          </li>
          <li>
            <a href="#tabs"> Tabs </a>
          </li>
        </ul>
      </aside>
    </div>
    <div class="column">
      {% include elements/typography.html %}
      {% include elements/box.html %}
      {% include elements/button.html %}
      {% include elements/content.html %}
      {% include elements/delete.html %}
      {% include elements/form.html %}
      {% include elements/icon.html %}
      {% include elements/images.html %}
      {% include elements/notifications.html %}
      {% include elements/progress.html %}
      {% include elements/table.html %}
      {% include elements/tag.html %}
      {% include components/breadcrumb.html %}
      {% include components/hero.html %}
      {% include components/card.html %}
      {% include components/dropdown.html %}
      {% include components/level.html %}
      {% include components/media.html %}
      {% include components/menu.html %}
      {% include components/message.html %}
      {% include components/modal.html %}
      {% include components/navbar.html %}
      {% include components/pagination.html %}
      {% include components/panel.html %}
      {% include components/tabs.html %}
    </div>
  </div>
  {% include footer.html %}
  <div class="switcher select">
    <select>
        {% assign themes = (site.themes | sort: 'order') %}
      {% for t in themes %}
      <option value="{{ t.name | slugify }}"> {{ t.name }} </option>
      {% endfor %}
    </select>
  </div>
  <script crossorigin="anonymous" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" src="https://code.jquery.com/jquery-3.1.1.min.js">
  </script>
  <script type="text/javascript">
  function switchTheme(t) {
    var theme = t || 'default';
    $('#stylesheet').attr('href', '../' + theme + '/bulmaswatch.min.css');
    var title = theme.charAt(0).toUpperCase() + theme.substring(1);
    window.history.replaceState(theme, title, '?' + theme);
    $('.hero .title').text(title);
    document.title = title;
  }
  $(function() {
    $('.switcher select').change(function(e) {
      switchTheme(e.target.value);
    });
    if (window.location.search) {
      $('.switcher select').val(window.location.search.substring(1));
      $('.switcher select').trigger('change');
    }
    $('.modal-background, .modal-close').click(function() {
      $(this).parent().removeClass('is-active');
    });

    $('.nav-toggle').click(function() {
      $(this).toggleClass('is-active');
      $(this).siblings('.nav-menu').toggleClass('is-active');
    });

    $('.dropdown:not(.is-hoverable)').click(function(event) {
      event.stopPropagation();
      $(this).toggleClass('is-active');
    });

    $(document).click(function() {
      $('.dropdown:not(.is-hoverable)').removeClass('is-active');
    });

  });
  </script>
</body>

</html>
